<template>
    <div>
        <p>每天一句英语</p>
       <el-card class="box-card" style="height:80%">
            <div>
                <img :src=dailyEnglish.imgurl style="width:100%">
                <div style="float:left;text-align:left">
                    <div style="margin:20px;margin-bottom:10px">英文：{{Object.values(this.dailyEnglish)[3]}}</div>
                    <div style="margin:20px;margin-top:10px">翻译：{{this.dailyEnglish.ciba}}</div>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
  name: 'DailyEnglish',
  data (){
      return{
          dailyEnglish:{}
      }
  },
   mounted(){
      this.getDailyEnglish();
  },
  methods:{
      getDailyEnglish(){
        var _this = this;
        this.$axios.get("https://api.ooopn.com/ciba/api.php?type=json",{param:{}})
        .then(function(response){
                _this.dailyEnglish = response.data;
            })
        .catch(function(error){
                console.info(error);
        });
    }
  }
}
</script>
<style  scoped>
.box-card {
    width:80%;
    height: 90%;
    margin: auto;
  }
</style>
